<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<link rel="stylesheet" type="text/css" href="__ADMIN__/css/login2.css"/>
	</head>
	<script language="javascript" type="text/javascript">

     var code ; //在全局 定义验证码
     function createCode()
     {
       code = "";
       var codeLength = 4;//验证码的长度
       var checkCode = document.getElementById("checkCode");
       var selectChar = new Array(0,1,2,3,4,5,6,7,8,9);//所有候选组成验证码的字符，当然也可以用中文的

       for(var i=0;i<codeLength;i++)
       {


       var charIndex = Math.floor(Math.random()*10);
       code +=selectChar[charIndex];


       }
//       alert(code);
       if(checkCode)
       {
         checkCode.className="code";
         checkCode.value = code;
       }

     }

      function validate ()
     {
       var inputCode = document.getElementById("input1").value;
       if(inputCode.length <=0)
       {
           alert("请输入验证码！");
       }
       else if(inputCode != code )
       {
          alert("验证码输入错误！");
          createCode();//刷新验证码
       }
       else
       {
         alert("OK");
       }

       }

    </script>
	<body onload="createCode()">

		<div class="login-box" >
			<img class="back1" src="__ADMIN__/images/back1.png"/>
			<img class="logo-d" src="__ADMIN__/images/logo-d.png"/>
			<img class="back-left" src="__ADMIN__/images/back1-left.png"/>
			<img class="back-right" src="__ADMIN__/images/back1-right.png"/>
			<div class="dh-left-top">
				<span class="span1 animate1"></span>
				<span class="span2 animate2"></span>
				<span class="span3 animate3"></span>
				<span class="span4 animate4"></span>
				<span class="span5 animate5"></span>
				<span class="span6 animate6"></span>
				<span class="span7 animate7"></span>
				<span class="span8 animate8"></span>
			</div>
			<div class="login">
				<h3>管理登录</h3>
				<p class="yhm">
					<span>用户名</span>
					<input type="text" name="username" />
				</p>
				<p class="mima">
					<span>密码</span>
					<input type="password" name="userpwd" />
				</p>
				<p class="yzm">
					<input type="tel" name="code"  />
					<input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="code">
				</p>
				<p class="denlu">
					<button class="btn">
						登录
					</button>
				</p>
			</div>
			<div class="dh-left-bottom">
				<i class="i1"></i>
				<i class="i2"></i>
				<i class="i3"></i>
				<i class="i4"></i>
				<i class="i5"></i>
			</div>
		</div>

	<script src="__ADMIN__/js/jquery.3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="__ADMIN__/js/login2.js" type="text/javascript" charset="utf-8"></script>
	<script src="__ADMIN__/js/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="__ADMIN__/js/maowenke.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(window).ready(function(){
			var height = $(window).height();
			$('.login-box').height(height);
			$(window).resize(function(){
				var height = $(window).height();
				$('.login-box').height(height);
			})

			$('input[name=username]').focus(function(){
//				console.log('dd');
				$('.yhm span').text('');
				$('.yhm').css({
					background : "url(/static/admin/images/yhm.png) no-repeat",
					backgroundPosition : '15px 0'
				})
			})
			$('input[name=username]').blur(function(){
				$('.yhm span').text('用户名');
				$('.yhm').css({
					background : "none"
				})
			})
			$('input[name=userpwd]').focus(function(){
//				console.log('dd');
				$('.mima span').text('');
				$('.mima').css({
					background : "url(/static/admin/images/mima.png) no-repeat",
					backgroundPosition : '15px 0'
				})
			})
			$('input[name=userpwd]').blur(function(){
				$('.mima span').text('密码');
				$('.mima').css({
					background : "none"
				})
			})
			$('.btn').on('click',function(){
				var nameVal = $('input[name=username]').val();
				var pwdVal = $('input[name=userpwd]').val();
				var codeVal = $('input[name=code]').val();
//				console.log(nameVal,pwdVal,codeVal);

			       if(nameVal.length <= 0 ){
			           layer.msg('请输入用户名!');
			       }
			       else if(pwdVal.length <=0 ){
			        	layer.msg('请输入密码!');
			       }
			       else if(codeVal.length <=0 ){
			        	layer.msg('请输入验证码!');
			       }
			       else if(codeVal != code ){
			       	   layer.msg('验证码输入错误!');
			           createCode();//刷新验证码
			       }
			       else{
			           ajaxUpdate("{:url('land/admin')}",{user:nameVal,pwd:pwdVal},true,'POST',function (data) {
			               console.log(data);
						  if(data==1){
                              layer.msg('登陆成功');
						      setTimeout(function () {
								  location.href="{:url('index/index')}";
                              },1000)
						  }else{
						      layer.msg(data);
						  }
                       });
			       }
			});

			donghua();
			function donghua(){
				var t = '';
				var num = 0;
				t = setInterval(function(){
					num++;
					if(num == 15){
						var time = 0;
						for(var i = 1;i<=8;i++){
							var name = '.span' + i;
							var animate =  'animate' + i;
							if(i % 2 == 0){
								$(name).removeClass(animate);
							}else{
								$(name).removeClass(animate);
							}
						}
						setTimeout(function(){
							for(var i = 1;i<=8;i++){
								var name = '.span' + i;
								var animate =  'animate' + i;
								if(i % 2 == 0){
									$(name).addClass(animate);
								}else{
									$(name).addClass(animate);
								}
							}
						},1000)
						clearInterval(t);
						donghua();
					}
				},750);
			}
		})
	</script>
	</body>
</html>
